<!--
 * @Author: WeijianXu weijian.xu@unidt.com
 * @Date: 2024-04-28 15:28:14
 * @LastEditors: WeijianXu weijian.xu@unidt.com
 * @LastEditTime: 2024-04-29 10:51:59
 * @FilePath: \echarts5-test\src\App.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import { sideRoutes } from '@/router/index';
</script>

<template>
  <div class="app">
    <div class="nav-bar">
      <ul v-for="route in sideRoutes">
        <li>
          <h4>{{ route.meta.title }}</h4>
          <ul>
            <li v-for="child in route.children">
              <router-link :to="{ name: child.name }">{{ child.meta.title }}&nbsp;&nbsp;<i>{{
                child.meta.version }}</i></router-link>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div id="main" class="main">
      <router-view></router-view>
    </div>
  </div>
</template>

<style scoped lang="scss">
.app {
  display: flex;
  justify-content: space-between;
  // align-items: center;
  height: 100%;

  .nav-bar {
    width: 240px;
    overflow-y: auto;
    border-right: 1px solid #ddd;
    flex-shrink: 0;
  }

  .main {
    flex: 1;
    height: 100%;
  }
}
</style>
